<template>
  <div class="homeWrap" style="height:100%">
    <el-container style="height:100%">
      <el-header style="background-color:rgba(67, 129, 230, 1)">
        <h2 style="color:white;width:50%;float:left">
          电商后台管理系统
        </h2>
        <div style="color:white;width:50%;float:right;text-align:right">
          <!-- <h6 style="width:200px; margin-top:50px;"></h6> -->
          <el-avatar :size="40" @error="errorHandler" style="margin-top:10px;margin-left:81%;float:left">
            <img :src="imgUrl" />
          </el-avatar>
          <span style="width:120px;height:50px;margin-top:20px;float:right">
            欢迎,<em style="color:white"><u>{{loginUser.userName}}</u></em>
            <el-button type="text" style="color:rgb(255, 0, 98)" @click="logout()">注销</el-button>
          </span>

        </div>
      </el-header>
      <el-container style="height:100%">
        <div class="aside">
          <el-aside width="200px" style="height:100%">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
              background-color="rgba(0, 21, 41, 1)" text-color="#909399" style="height:100%"
              active-text-color="#1890FF">
              <h5 align='center' style="color:#909399">管理员</h5>

              <el-menu-item index="1" @click="goTo('/welcome')">
                <i class="el-icon-location"></i>
                <span slot="title">工作台</span>
              </el-menu-item>

              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>商品</span>
                </template>
                <el-menu-item index="2-1" @click="goTo('/goods')">商品管理
                </el-menu-item>
                <el-menu-item index="2-2" @click="goTo('/category')">商品分类
                </el-menu-item>
                <el-menu-item index="2-3" @click="goTo('/spec')">商品规格
                </el-menu-item>
                <el-menu-item index="2-4" @click="goTo('/evaluate')">商品评价
                </el-menu-item>

              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>营销</span>
                </template>
                <el-submenu index="3-1">
                  <i class="el-icon-bell"></i>
                  <template slot="title">秒杀管理</template>
                  <el-menu-item index="3-1-1" @click="goTo('/deploy')">秒杀配置
                  </el-menu-item>
                  <el-menu-item index="3-1-2" @click="goTo('/seckgoods')">秒杀商品
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="3-2">
                  <i class="el-icon-s-operation"></i>
                  <template slot="title">砍价管理</template>
                  <el-menu-item index="3-2-1" @click="goTo('/bargaingoods')">砍价商品
                  </el-menu-item>
                  <el-menu-item index="3-2-2" @click="goTo('/bargain')">砍价列表
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="3-3">
                  <i class="el-icon-s-operation"></i>
                  <template slot="title">直播管理</template>
                  <el-menu-item index="3-3-1" @click="goTo('/livelist')">直播列表
                  </el-menu-item>
                  <el-menu-item index="3-3-2" @click="goTo('/addlive')">创建直播
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="3-4">
                  <i class="el-icon-s-operation"></i>
                  <template slot="title">拼团管理</template>
                  <el-menu-item index="3-4-1" @click="goTo('/groupgoods')">拼团商品
                  </el-menu-item>
                  <el-menu-item index="3-4-2" @click="goTo('/grouplist')">拼团列表
                  </el-menu-item>
                </el-submenu>
              </el-submenu>

            </el-menu>
          </el-aside>
        </div>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import welcome from '@/components/welcome.vue';
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: { welcome },
  props: {},
  data () {
    // 这里存放数据
    return {
      token: "",
      loginUser: {},
      imgUrl: "",
    };
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    goTo (path) {
      this.$router.replace(path);
    },
    getLoginUser () {
      this.$http
        .get('http://localhost:8001/coco/admin/login/findLoginUser', {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          console.log(data);
          this.loginUser = data.data;
          this.imgUrl = data.data.imgUrl;
        }).catch((err) => { });
    },
    errorHandler () {
      return true;
    },
    logout () {
      this.$http
        .get('http://localhost:8001/coco/admin/login/logout/', {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          if (data.code == 206) {
            this.$message({
              message: data.message,
              type: 'success'
            });
            this.$router.push("/");
          } else {
            this.$message.error(data.message);
          }
        }).catch((err) => { });
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
    this.token = localStorage.getItem("token");
    this.$router.replace('/welcome');
    this.getLoginUser();

  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-col-12 {
  width: 15%;
}
.homeWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
